<template>
  <el-dialog title="催单" :visible.sync="reminderFlag" center :append-to-body="true" :lock-scroll="false" width="50%"
    z-index="2007">
    <div>
      <el-form :model="reminderForm" :rules="reminderrules" ref="reminderForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="催单类型" prop="reminderType" style="margin-bottom: 22px">
          <el-select v-model="reminderForm.reminderType" placeholder="请选择催单类型">
            <el-option v-for="(item, index) in reminderList" :key="index" :label="item.dictValue"
              :value="item.dictKey"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催单内容" prop="reminderContent">
          <el-input type="textarea" v-model.trim="reminderForm.reminderContent" placeholder="请输入催单内容"
            :autosize="{ minRows: 3 }" maxlength="50" show-word-limit style="width: 350px"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="reminderResetForm('reminderForm')">取消</el-button>
      <el-button type="primary" @click="reminderSubmitForm($event, 'reminderForm')">提交</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getReminderTypeList, // 催单类型列表
  addWorkOrderReminder, // 新增催单
} from "@/api/pending";
export default {
  props: {
    ruleForm: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      reminderFlag: false, //催单
      // 催单
      reminderForm: {
        orderId: "",
        reminderType: "", // 催单类型
        reminderContent: "", // 催单内容
      },
      reminderList: "", // 催单列表
      reminderrules: {
        reminderType: [
          { required: true, message: "请选择催单类型", trigger: "change" },
        ],
        reminderContent: [
          { required: true, message: "请输入催单内容", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    show() {
      this.reminderFlag = true;
      this.initForm();
      this.getReminderTypeList();
    },
    initForm() {
      var deliveryEndTime = new Date(this.ruleForm.deliveryEndTime);
      var deliveryStartTime = new Date(this.ruleForm.deliveryStartTime);
      if (deliveryStartTime.getTime() > new Date().getTime()) {
        //配送时间前催单
        this.reminderForm.reminderType = 1;
        this.reminderForm.reminderContent = "配送时间前催单";
      } else if (deliveryEndTime.getTime() < new Date().getTime()) {
        //配送时间后催单
        this.reminderForm.reminderType = 3;
        this.reminderForm.reminderContent = "超时催单";
      } else {
        //配送时间段内
        this.reminderForm.reminderType = 2;
        this.reminderForm.reminderContent = "配送时间段内催单";
      }
    },
    getReminderTypeList() {
      // 催单类型列表
      getReminderTypeList().then((res) => {
        // console.log(res.data.data);
        this.reminderList = res.data.data;
      });
    },
    // 催单确认按钮
    reminderSubmitForm(e, formName) {
      this.reminderForm.orderId = this.ruleForm.id;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addWorkOrderReminder(this.reminderForm).then((res) => {
            if (res.data.code == 200) {
              this.$refs[formName].resetFields();
              this.reminderFlag = false;
              this.$confirm(
                `催单成功！后台单号：${this.ruleForm.xmbzNo}`,
                "提示",
                {
                  showCancelButton: false,
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "success",
                }
              )
                .then(() => {
                  window.close();
                })
            }
          });
        }
      });
    },
    // 催单取消按钮
    reminderResetForm() {
      this.reminderFlag = false;
    },
  }
};
</script>
<style lang="scss" scoped></style>